.example1-enter {
  opacity: 0;
  transform: scale(0.9);
}
.example1-enter-active {
  opacity: 1;
  transform: translateX(0);
  transition: opacity 300ms, transform 300ms;
}
.example1-exit {
  opacity: 1;
}
.example1-exit-active {
  opacity: 0;
  transform: scale(0.9);
  transition: opacity 300ms, transform 300ms;
}

.example2 {
  .label {
    margin-bottom: 0.5rem;
  }

  .modes {
    margin-bottom: 1rem;
  }

  .button-container {
    margin-bottom: 0.5rem;
  }

  .fade-enter .btn {
    opacity: 0;
    transform: translateX(-100%);
  }
  .fade-enter-active .btn {
    opacity: 1;
    transform: translateX(0%);
  }
  .fade-exit .btn {
    opacity: 1;
    transform: translateX(0%);
  }
  .fade-exit-active .btn {
    opacity: 0;
    transform: translateX(100%);
  }
  .fade-enter-active .btn,
  .fade-exit-active .btn {
    transition: opacity 500ms, transform 500ms;
  }
}

.example3 {
  .remove-btn {
    margin-right: 0.5rem;
  }

  .item-enter {
    opacity: 0;
  }
  .item-enter-active {
    opacity: 1;
    transition: opacity 500ms ease-in;
  }
  .item-exit {
    opacity: 1;
  }
  .item-exit-active {
    opacity: 0;
    transition: opacity 500ms ease-in;
  }
}
